<template>
	<!-- 点餐案例 -->
	<view class="u-wrap">
		
		<!-- 这个盒子背景颜色为白色，放搜索按钮和地址信息 -->
		<view class="u-wrap-box1">
			<!-- 搜索框 -->
			<view class="u-search-box" @tap="searchHandle">
				<image src="@/static/svg/search.svg" class="search-img"></image>
			</view>
			
			
			
			<!-- 定位获取想点的外卖位置————此位置固定 -->
			<view class="address-view">
			
				<view class="address-up">
					<!-- 位置左边 -->
					<view class="address-view-left">
						<view class="address-view-left-uu">
							<image src="@/static/svg/star.svg" class="address-view-image"></image>
							<view class="padding-left-xs" style="font-size: 30rpx;font-weight: 700;">湖北武汉江汉路大洋百货店</view>
							<image src="../../static/svg/right.svg" class="address-view-image"></image>
						</view>
			
						<view class="address-view-left-uu">
							<image src="@/static/svg/location.svg" class="address-view-image"></image>
							<view class="padding-left-xs" style="color:#B6B6B6;font-size: 28rpx;font-weight:500;">距离您9.4km
							</view>
						</view>
					</view>
			
			
					<!-- 位置右边 -->
					<view class="address-view-right">
						<view class="slider">
							<view :class="{ 'active': selectedOption == 'selfPickup' }" @click="selectOption('selfPickup')">
								自取
							</view>
							<view :class="{ 'active': selectedOption == 'delivery' }" @click="selectOption('delivery')">
								外卖
							</view>
						</view>
					</view>
				</view>
			
			
				<view class="address-down">
					<view class="address-down-left" @tap.stop="showDetailInfo">门店详细信息</view>
					<view class="address-down-right" @tap.stop="showDetailInfo">
						<span>点击查看</span>
						<image src="@/static/svg/down.svg" class="image-down"></image>
					</view>
				</view>
			</view>
			
			
		</view>
		

		<!-- 这块为模态框，门店公告 -->
		<view class="mask" @click="closemask" v-show="showMask">
			<view class="mask-view" @click.stop>
				<view class="mask-view-title">门店公告</view>
				<view class="mask-view-details">
					<view class="mask-view-uu" style="font-size: 32rpx;color: black;">门店信息</view>
					<view class="mask-view-uu">地址：湖北省武汉市东西湖区金山大道1239号金银湖万达广场1F层1002号商铺</view>
					<view class="mask-view-uu">门店电话：<span style="color: red;">13476000719</span></view>
					<view class="mask-view-uu">门店营业时间：周一~周日10:00-21:30</view>
					<view class="mask-view-uu" style="color: red;">查看门店服务资质</view>
					<view class="mask-view-uu" style="color: red;">查看视频安全档案</view>
				</view>
			</view>
		</view>
		<!-- 点餐头部图片 -->
			<view class="chooseView-image-title">
				<image src="@/static/images/choose_title_image.png"  style="width: 100%;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>

		<!-- 点餐 -->













	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedOption: 'selfPickup',
				showMask: false,
			}
		},
		methods: {
			/**
			 * 查询的方法，todo 重新开一个界面
			 */
			searchHandle() {

			},
			/**
			 * 自取和外卖按钮切换功能
			 * @param {Object} option
			 */
			selectOption(option) {
				this.selectedOption = option;
			},
			/**
			 * 显示店铺详细信息
			 */
			showDetailInfo() {
				this.showMask = true;
			},
			/**
			 * 关闭店铺详细信息
			 */
			closemask() {
				this.showMask = false;
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@import './order.css'
</style>